/*
 * @Author: yuanxiang 
 * @Date: 2018-05-09 11:17:04 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-09-25 16:43:49
 */
<template>
  <div class="gq">
    <bg-lay-out :hideTopBar="true" :hideMarginLeft="true" :hideMask="true" :widthSize="true">
      <div slot="main">
          <div class=" textColor">
            <img class="gqOutViewLogo" src="../../../../../static/img/gq/logomdpi.png">
            <div class="mapCon">
              <gq-map  :areaData="quantity" v-model="buy_items" :placeData="stockAddressArr"></gq-map>
            </div>
            <div class="row topCon">
              <div class="row item">
                <div>
                <p class="text">累计销售量(吨)<span class="gqSubhead">/当月</span></p>
                    <p class="number boldFont">
                      <i-count-up
                      :startVal="startVal"
                      :endVal="sell_all"
                      :decimals="decimals"
                      :duration="duration"
                      :options="options"
                    />
                    <span>
                          <i class="gqSubhead smallNumber">/</i><i-count-up
                          :startVal="startVal"
                          :endVal="currentMonthOrderWeight"
                          :decimals="decimals"
                          :duration="duration"
                          :options="options"
                          class="gqSubhead smallNumber"
                        />
                    </span>
                  </p>
                </div>
              </div>
                <div class="itemLine"></div>
              <div class="row item">
                <div>
                  <p class="text">累计成交额(元)<span class="gqSubhead">/当月</span></p>
                    <p class="number boldFont">
                      <i-count-up
                      :startVal="startVal"
                      :endVal="sell_nums"
                      :decimals="decimals"
                      :duration="duration"
                      :options="options"
                    />
                    <span>
                          <i class="gqSubhead smallNumber">/</i><i-count-up
                          :startVal="startVal"
                          :endVal="currentMonthPayMoney"
                          :decimals="decimals"
                          :duration="duration"
                          :options="options"
                          class="gqSubhead smallNumber"
                        />
                    </span>
                  </p>
                </div>
              </div>
                <div class="itemLine"></div>
              <div class="row item">
                <div>
                  <p class="text">累计利润(元)<span class="gqSubhead">/当月</span></p>
                    <p class="number boldFont">
                      <i-count-up
                      :startVal="startVal"
                      :endVal="sell_Money"
                      :decimals="decimals"
                      :duration="duration"
                      :options="options"
                    />
                    <span>
                          <i class="gqSubhead smallNumber">/</i><i-count-up
                          :startVal="startVal"
                          :endVal="currentMonthGrossProfitAmount"
                          :decimals="decimals"
                          :duration="duration"
                          :options="options"
                          class="gqSubhead smallNumber"
                        />
                    </span>
                  </p>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div class="topLeftCon">
              <div class="shipmentDataTop">
                  <p class="title"><i></i>用户量统计(人)</p>
              </div>
              <pie-chart v-model="userNumberArr" :option="userNumberOption"></pie-chart>
            </div>
            <div class="bottomLeftCon">
              <div class="shipmentDataTop">
                  <p class="title"><i></i>计划单统计</p>
              </div>
              <div class="row planChartCon">
                <div class="planChartItem">
                  <p class="leftText">当月 <span>{{currentMonth}}%</span></p>
                  <bar-chart v-model="mouthPlanArr" :option="mouthPlanOption" :chartStyle="'min-width:150px;min-height:280px;'"></bar-chart>
                </div>
                <div class="planChartItem">
                  <p class="rightText">当周<span>{{currentWeek}}%</span></p>
                  <bar-chart v-model="weekPlanArr" :option="weekPlanOption" :chartStyle="'min-width:150px;min-height:280px;'"></bar-chart>
                  <!-- <chart :chartStyle="'min-width:100px;min-height:390px;height:390px'"  :option="weekPlanArr" /> -->
                </div>
              </div>
            </div>
            <div class="topRightCon">
              <div class="shipmentDataTop">
                  <p class="title"><i></i>当月分公司销量及利润</p>
              </div>
              <bar-line-charts slot="main" v-model="branchOfficeOption" :option="tradeTrendOption"></bar-line-charts>
            </div>
            <div class="bottomRightCon">
              <div class="shipmentDataTop">
                  <p class="title"><i></i>品类当月采销统计</p>
                  <el-select class="selectCon" @change="fetchGrossProfit"  v-model="pickDefault">
                    <el-option v-for="item in pickArr" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
              </div>
              <line-chartss slot="main" v-model="grossProfitOption" :option="myLinesOption"></line-chartss>
              <!-- <chart  :chartStyle="'min-height:300px'"  :option="grossProfitOption" /> -->
            </div>
          </div>
      </div>
    </bg-lay-out>
  </div>
</template>
<script>
import chart from "@/components/Charts/newChart";
import gqMap from "@/components/gq/gqMap";
import ICountUp from "vue-countup-v2";
import pieChart from "@/components/Charts/pieChart";
import barChart from "@/components/Charts/barChart";
import barLineCharts from "@/components/Charts/barLineCharts";
import lineChartss from "@/components/Charts/lineChartss";
import bgLayOut from "@/components/bgLayOut/index";
import {
  GetPlanOrderReportListByToday,
  GetDataByTarget,
  GetWarehouseSupplierLatLngList,
  GetHomePageDataForInner,
  GetCustomerInfo,
  GetProductDetailList,
  GetPlanOrderStatistics
} from "@/api/gq/index";
export default {
  name: "index",
  components: {
    chart,
    gqMap,
    ICountUp,
    pieChart,
    barChart,
    barLineCharts,
    lineChartss,
    bgLayOut
  },
  mounted() {
    this.fetchData();
  },
  data() {
    return {
      myLinesOption: {
        // grid: { bottom: "20%", left: "6%" },

        tooltip: {
          show: true,
          axisPointer: {
            type: "line"
          }
        },
        hideLineColor: true,
        showSymbol: "none",
        color: ["#F0BF24", "#00D0FE"],
        showLabel: true,

        startColor: "rgba(40,231,135,0.5)",
        endColor: "rgba(40,231,135,0.1)"
      },
      tradeTrendOption: {
        xAxis: {
          axisLabel: {
            rotate: 45
          }
        },
        grid: {
          bottom: 90
        },
        unit: ["吨", "万元"]
      },
      mouthPlanOption: {
        // 计划单 - 当
        grid: {
          width: "60%",
          left: "40%"
        }
      },
      weekPlanOption: {
        // 计划单 - 当周
        grid: {
          width: "60%",
          left: "30%"
        }
      },
      userNumberOption: { showLabel: true },
      pickArr: [
        {
          label: "采购量",
          value: "24027"
        },
        {
          label: "销量",
          value: "24028"
        }
      ],
      isTest: this.$utils.gqIsTestFalse, //  是否测试数据 ture  测试数据  false 正式数据
      pickDefault: "24027",
      currentWeek: 0, // 当周上浮
      currentMonth: 0, // 当月上浮
      grossProfitOption: [], // 吨钢毛利
      branchOfficeOption: [], // 当月分公司销量和利润
      mouthPlanArr: [], // 月计划单统计
      weekPlanArr: [], // 周计划单统计
      userNumberArr: [], // 用户量统计
      quantity: [], // 发单量
      stockAddressArr: [], // 供应商、库存数据
      buy_items: [],
      startVal: 0,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      },
      groupPlate: "9004",
      sell_all: 0,
      sell_nums: 0,
      sell_Money: 0,
      get_allmoney: 0,
      currentMonthGrossProfitAmount: 0,
      currentMonthOrderWeight: 0,
      currentMonthPayMoney: 0,
      allUserNumber: 0 // 用户总数
    };
  },
  methods: {
    //  基础数据
    async fetchBaseData() {
      const paramsData = {
        isTest: this.isTest
      };
      try {
        var res = await GetHomePageDataForInner(paramsData);
        if (res.data.code === "0") {
          const result = res.data.result;
          this.sell_Money = result.sumGrossProfitAmount; // 累计利润
          this.sell_all = result.sumOrderWeight; // 累计销售量
          this.sell_nums = result.sumPayMoney; // 累计成交额
          this.currentMonthGrossProfitAmount =
            result.currentMonthGrossProfitAmount; // 当月利润
          this.currentMonthOrderWeight = result.currentMonthOrderWeight; // 当月销售量
          this.currentMonthPayMoney = result.currentMonthPayMoney; // 当月成交额
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 吨钢毛利
    async fetchGrossProfit() {
      try {
        const res = [];
        const paramspl = {
          productType: "7001", // 盘螺
          queryType: this.pickDefault,
          isTest: this.isTest
        };
        const respl = await GetProductDetailList(paramspl);
        if (respl.data.code === "0") {
          for (let index = 0; index < respl.data.result.length; index++) {
            var obj = {
              list: [],
              name: ""
            };
            for (let i = 0; i < 4; i++) {
              var listObj = {
                name: "",
                value: 0
              };
              obj.list.push(listObj);
            }
            res.push(obj);
          }
          respl.data.result.forEach((item, index) => {
            res[index].name = item.xData;
            res[index].list[0].name = "盘螺";
            res[index].list[0].value = item.value;
          });
        }
        const paramsxc = {
          productType: "7002", // 线材
          queryType: this.pickDefault,
          isTest: this.isTest
        };
        const resxc = await GetProductDetailList(paramsxc);
        if (resxc.data.code === "0") {
          resxc.data.result.forEach((item, id) => {
            res[id].list[1].name = "线材";
            res[id].list[1].value = item.value;
          });
        }
        const paramslw = {
          productType: "7003", // 螺纹
          queryType: this.pickDefault,
          isTest: this.isTest
        };
        const reslw = await GetProductDetailList(paramslw);
        if (reslw.data.code === "0") {
          reslw.data.result.forEach((item, idlw) => {
            res[idlw].list[2].name = "螺纹";
            res[idlw].list[2].value = item.value;
          });
        }
        const paramsgp = {
          productType: "7004", // 钢坯
          queryType: this.pickDefault,
          isTest: this.isTest
        };
        const resgp = await GetProductDetailList(paramsgp);
        if (resgp.data.code === "0") {
          resgp.data.result.forEach((item, idGq) => {
            res[idGq].list[3].name = "钢坯";
            res[idGq].list[3].value = item.value;
          });
        }
        this.$set(this, "grossProfitOption", res);
      } catch (error) {
        console.log(error);
      }
    },
    // 分公司利润和销量
    async fetchBranchOffice() {
      try {
        const params = {
          queryType: "24025", // 分公司销量
          timeType: "3008",
          isTest: this.isTest
        };
        const res = await GetDataByTarget(params);
        const paramsMoney = {
          queryType: "24026", // 分公司利润
          timeType: "3008",
          isTest: this.isTest
        };
        const resMoney = await GetDataByTarget(paramsMoney);
        if (res.data.code === "0") {
          const newArr = [
            {
              name: "分公司销量",
              value: res.data.result.list,
              type: "bar"
            },
            {
              name: "分公司利润",
              value: resMoney.data.result.list,
              type: "line"
            }
          ];
          this.$set(this, "branchOfficeOption", newArr);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 计划单统计
    async fetchPlanOption() {
      const paramsData = {
        isTest: this.isTest
      };
      try {
        const res = await GetPlanOrderStatistics(paramsData);
        if (res.data.code === "0") {
          // 上月当月
          const result = res.data.result;
          var resMounth = [
            { name: "上月", value: result.lastMonthOrderWeight },
            { name: "当月", value: result.currentMonthOrderWeight }
          ];
          // 当月上浮
          if (Number(result.currentMonthIncrease) > 0) {
            this.currentMonth = "+" + result.currentMonthIncrease;
          }
          // 当周上浮
          if (Number(result.currentWeekIncrease) > 0) {
            this.currentWeek = "+" + result.currentWeekIncrease;
          }
          var resWeek = [
            { name: "上周", value: result.lastWeekOrderWeight },
            { name: "本周", value: result.currentWeekOrderWeight }
          ];
          this.$set(this, "mouthPlanArr", resMounth);
          this.$set(this, "weekPlanArr", resWeek);
        }
      } catch (error) {
        console.log(error);
      }
    },
    //  用户量统计
    async fetchUserNumber() {
      const paramsData = {
        isTest: this.isTest
      };
      try {
        var res = await GetCustomerInfo(paramsData);
        if (res.data.code === "0") {
          const result = res.data.result;
          const resData = [];
          resData[0] = { name: "今日新增", value: result.newlyAddedToday };
          resData[1] = { name: "本月新增", value: result.newlyAddedMonth };
          this.allUserNumber = result.sumCustomer; //  用户总数
          this.$set(this, "userNumberArr", resData);
        }
      } catch (e) {
        console.log(e);
      }
    },
    //  获取库房供应商的坐标
    async fetchStockAddress() {
      const paramsData = {
        isTest: this.isTest
      };
      try {
        var res = await GetWarehouseSupplierLatLngList(paramsData);
        var newArr = [];
        var newSupplierArr = [];
        var newWarehoustArr = [];
        if (res.data.code === "0") {
          var result = res.data.result;
          result.supplierList.forEach(item => {
            var obj = {
              name: item.city,
              value: [item.lng, item.lat],
              label: {
                normal: {
                  formatter: "{b}",
                  right: "20%",
                  show: true,
                  fontSize: "10",
                  color: "#0c43fd"
                }
              },
              itemStyle: { normal: { color: "#3CF1DE" } }
            };
            newSupplierArr.push(obj);
          });
          //   供应商
          result.warehouseList.forEach(item => {
            var obj = {
              name: item.city,
              value: [item.lng, item.lat],
              label: {
                normal: {
                  formatter: "{b}",
                  right: "20%",
                  show: true,
                  fontSize: "10",
                  color: "#3CF1DE"
                }
              },
              itemStyle: { normal: { color: "#0c43fd" } }
            };
            newWarehoustArr.push(obj);
          });
          newArr = newSupplierArr.concat(newWarehoustArr);
          this.stockAddressArr = newArr;
        }
      } catch (e) {
        console.log(e);
      }
    },
    async fetchGetPlanOrderReportListByToday() {
      try {
        var params = {
          groupPlate: this.groupPlate,
          isTest: this.isTest
        };
        var res = await GetPlanOrderReportListByToday(params);
        if (res.data.code === "0") {
          var result = res.data.result;
          this.buy_items = result.list;
          this.quantity = result.listCount;
        }
      } catch (e) {
        console.log(e);
      }
    },
    fetchData() {
      // 对内大屏数据汇总
      this.fetchBaseData();
      // 吨钢毛利
      this.fetchGrossProfit();
      // 分公司利润和销量
      this.fetchBranchOffice();
      // 用户量统计
      this.fetchUserNumber();
      // 计划单统计
      this.fetchPlanOption();
      //  、获取库房供应商的坐标
      this.fetchStockAddress();
      this.fetchGetPlanOrderReportListByToday();
    }
  }
};
</script>
<style>
@import "../../../../styles/element-ui/select.css";
</style>
<style scoped>
.gqSubhead {
  color: #31cee6;
}
.selectCon {
  position: absolute;
  right: 10px;
  z-index: 100;
  width: 100px;
}
.bottomRightCon {
  position: absolute;
  right: 50px;
  top: 590px;
  height: 396px;
  width: 643px;
  background: url("../../../../../static/img/gq/gqOutViewxRightItemTopBg.png")
    left top no-repeat;
  background-size: 100% 100%;
}
.topRightCon {
  position: absolute;
  right: 50px;
  top: 170px;
  height: 396px;
  width: 643px;
  background: url("../../../../../static/img/gq/gqOutViewxRightItemTopBg.png")
    left top no-repeat;
  background-size: 100% 100%;
}
.shipmentDataTop .title i {
  display: inline-block;
  width: 3px;
  height: 15px;
  margin-right: 5px;
  background-color: #2ff0d2;
}
.shipmentDataTop {
  font-size: 18px;
  padding: 40px 0 0 40px;
}
.bottomLeftCon {
  position: absolute;
  left: 50px;
  top: 600px;
  width: 439px;
  height: 363px;
  margin-top: 20px;
  background: url("../../../../../static/img/gq/xiaoshou.png") left top
    no-repeat;
  background-size: 100% 100%;
}
.topLeftCon {
  position: absolute;
  left: 50px;
  top: 220px;
  width: 439px;
  height: 363px;
  margin-top: 20px;
  background: url("../../../../../static/img/gq/xiaoshou.png") left top
    no-repeat;
  background-size: 100% 100%;
}
.topCon .item {
  margin-top: 10px;
  justify-content: center;
  width: 33%;
}
.topCon {
  position: absolute;
  left: 50px;
  top: 20px;
  justify-content: space-around;
  align-items: center;
  width: 1160px;
  height: 193px;
  background-image: url("../../../../../static/img/gq/neibu_top.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.itemLine {
  width: 1px;
  height: 120px;
  background: rgba(47, 240, 210, 0.3);
}
.blodText {
  margin-left: 15px;
  font-size: 28px;
  vertical-align: sub;
}
.planChartItem {
  width: 50%;
  text-align: center;
}
.planChartItem .leftText {
  position: absolute;
  left: 21%;
  top: 20%;
}
.planChartItem .rightText {
  position: absolute;
  left: 69%;
  top: 20%;
}
.shipmentData {
  padding: 40px 0 0 40px;
}
.shipmentData .title {
  display: flex;
  align-items: center;
}
.row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.gqOutViewLogo {
  position: absolute;
  top: 50px;
  width: 107px;
  height: 40px;
  right: 50px;
  z-index: 99;
}
.mapCon {
  position: fixed;
  top: 0;
  right: 0;
}
.boldFont {
  margin-top: 6pt;
}
.bg4Con {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background-image: url("../../../../../static/img/bigData4/bg4.jpg"); */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 1080px;
}
.topCon .text span {
  font-size: 15px;
  margin-left: 10px;
}
.topCon .text {
  font-size: 25px;
}
.topCon .item .number span {
  font-size: 60px;
  font-family: DIN Condensed Bold;
}
.topCon .item .number span:nth-of-type(2) span {
  font-size: 30px;
  font-family: DIN Condensed Bold;
}
.topCon .item .number span:nth-of-type(2) i {
  margin-right: 5px;
  margin-left: 5px;
  font-style: normal;
  font-size: 40px !important;
}
</style>